<script lang="ts" setup name="home">
import { ref, reactive, onMounted, nextTick } from "vue";
import ProForm from "@/components/ProFrom";
import ProTable from "@/components/ProTable";
import Chart from "@/components/Charts/Chart.vue";
import { queryFormMap } from "./config/form";
import {
  lineOption,
  barOption,
  lineOption1,
  barOption2,
} from "./config/charts";
import { get } from "@/api/http";

const queryForm = reactive({});

const scroll = {} || { x: 2000, y: 0 };

const table = reactive({
  data: [],
});

/*----查询
---------------------------*/
const queryFormRef = ref();

const handleQuery = () => {
  // console.log(queryForm);
  if (!queryFormRef.value.verify()) return;
  updateTable();
};
onMounted(() => {
  handleQuery();
  // line.value.initChart([]);
});

/*----表格
---------------------------*/

async function updateTable() {
  // table.data = await get("/local/table/list");
}
</script>

<template>
  <a-card :bordered="false">
    <ProForm
      ref="queryFormRef"
      layout="inline"
      :mapping="queryFormMap"
      :model-value="queryForm"
      :defaultCol="8"
      @submit="handleQuery()"
    >
      <ProButton
        text="重置"
        icon="refresh"
        @click="queryFormRef.reset() && handleQuery()"
      />
      <ProButton
        text="查询"
        icon="search"
        type="primary"
        @click="handleQuery()"
      />
    </ProForm>
  </a-card>
  <a-grid class="h-380px" :row-gap="15" :col-gap="10" :cols="2">
    <a-grid-item>
      <a-card :bordered="false">
        <Chart :height="360" :option="lineOption" />
      </a-card>
    </a-grid-item>
    <a-grid-item>
      <a-card :bordered="false">
        <Chart :height="360" :option="barOption" />
      </a-card>
    </a-grid-item>
    <a-grid-item>
      <a-card :bordered="true">
        <Chart :height="360" :option="lineOption1" />
      </a-card>
    </a-grid-item>
    <a-grid-item>
      <a-card :bordered="true">
        <Chart :height="360" :option="barOption2" />
      </a-card>
    </a-grid-item>
  </a-grid>
</template>

<style lang="less" scoped></style>
